<template>
  <div class="newBox">
  <button class="bt wt-120" @click="handleBulid()">
        新增护理项目
      </button>
    </div>
  <div class="min-h serveProject bg-wt">
    
    <div class="baseList">
      
      <div class="tableBoxs">
        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
        <t-table 
          :row-key="rowKey" 
          :data="data" 
          :columns="COLUMNS" 
          vertical-align="middle"
          :hover="hover"
          :loading="dataLoading"
          tabel-content-width="100%"
          table-layout="fixed"
          >
          <!-- 序号 -->
          <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
         <!-- 图片预览 -->
          <template #image="{ row }">
            <div>
              <div class="tdesign-demo-image-viewer__base">
                <t-image-viewer :images="[row.image]">
                  <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image">
                      <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                      <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                        <span>
                          <BrowseIcon size="1.4em" /> 预览
                        </span>
                      </div>
                    </div>
                  </template>
                </t-image-viewer>
              </div>
            </div>
          </template>
          <!-- 价格拼接 -->
          <template #price="{ row }">
            {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
          </template>

          <!-- 按钮处理 -->
          <template #op="{row}">
            <div class="operateCon">
              <a class="btn-dl" @click="deleteById(row.id)">删除</a>
              <a class="font-bt" @click="edit(row.id)">编辑</a>
              <a class="delete" @click="tableSOS(row)">{{row.status===0?'启动':'禁用'}}</a>
            </div>
          </template>
        </t-table>
         <!-- 分页 -->
        <t-pagination
          v-if="total > 10"
          v-model="pagination.pageNum"
          v-model:pageSize="pagination.pageSize"
          :total="total"
          @change="onPageChange"
        />
      </div>
    </div>
  </div>
</template>
  
<script setup lang="jsx">
import { COLUMNS } from '../constants'

const props=defineProps({
  data:{
    type:Object,
    default:()=>{}
  },
  total:{
    type:Number,
    default:({})
  },
  pagination:{
    type:Object,
    default: () => {
      return {}
    }
  },

})

const emits=defineEmits(['onPageChange','handleBulid','edit','deleteById','tableSOS'])

const onPageChange=(val)=>{
  
  emits('onPageChange',val)
}

const handleBulid=()=>{
  emits('handleBulid')
}

const edit=(id)=>{
  emits('edit',id)
}

const deleteById=(id)=>{
  emits('deleteById',Number(id))
}

const tableSOS=(row)=>{

  emits("tableSOS",row)
}

//判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true;
  }
  return false;
}
</script>